<template>
  <div class="page-container">
    <div :class="sidebarMenuClass">
      <div class="sidebar-menu-inner">
        <header class="logo-env">
          <div class="logo">
            <a href="#" class="logo-expanded">
              <!-- <img src="@/assets/images/logo@2x.png" style="height:20px;" /> -->
            </a>
            <a href="#" class="logo-collapsed">
              <img src="@/assets/images/logo@2x.png" style="height:20px;" />
            </a>
          </div>
          <div class="mobile-menu-toggle visible-xs">
            <a href="#" data-toggle="mobile-menu" @click="clickMobileMenuBtn">
              <i class="fa-bars"><svg-icon icon-class="list" /></i>
            </a>
          </div>
        </header>

        <ul id="main-menu" :class="mainMenuClass">
          <li v-for="(menu, idx) in items" :key="idx">
            <a href="javascript:void(0)" class="smooth" @click="moveSlow(menu)" :title="transName(menu)">
              <i><svg-icon :icon-class="menu.icon" /></i>
              <span class="title">{{ transName(menu) }}</span>
            </a>
            <ul v-if="menu.children">
              <li v-for="(submenu, idx) in menu.children" :key="idx">
                <a :href="'#' + transName(submenu)" class="smooth" @click="moveSlow">
                  <span class="title">{{ transName(submenu) }}</span>
                </a>
              </li>
            </ul>
          </li>

          <li class="submit-tag">
            <router-link to="/about">
              <i><svg-icon icon-class="about" /></i>
              <span class="tooltip-blue">关于本站</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="hidden-sm hidden-xs">
            <a href="#" data-toggle="sidebar" @click="clickMenuBtn">
              <i class="fa-bars"><svg-icon icon-class="list" /></i>
            </a>
          </li>
        </ul>
      </nav>

      <div v-for="(item, idx) in items" :key="idx">
        <div v-if="item.siteList">
          <WebItem :item="item" :transName="transName" />
        </div>
        <div v-else v-for="(subItem, idx) in item.children" :key="idx">
          <WebItem :item="subItem" :transName="transName" />
        </div>
      </div>

      <Footer />
    </div>
  </div>
</template>

<script>
import WebItem from '@/components/WebItem.vue'
import Footer from '@/components/Footer.vue'
import { getMenuList } from "@/api/index";

export default {
  name: 'Index',
  components: {
    WebItem,
    Footer
  },
  data() {
    return {
      items: [],
      lang: {},
      sidebarMenuClass: 'sidebar-menu fixed',
      mainMenuClass: 'main-menu'
    }
  },
  created() {
    getMenuList().then(res => { // 导航站列表
      this.items=res.data
    });
  },
  mounted() {
  },
  methods: {
    transName(webItem) {
      return webItem.name;
    },
    moveSlow(menu) {
      const menuId = menu.name
      const element = document.getElementById(menuId);
      if (element) {
        var offsetTop = element.offsetTop;
        element.scrollIntoView({ top: offsetTop,behavior: 'smooth' });
      }
    },
    clickMenuBtn(){
      if(this.sidebarMenuClass.indexOf("collapsed")>-1){
        this.sidebarMenuClass="sidebar-menu fixed";
      } else{
        this.sidebarMenuClass="sidebar-menu fixed collapsed";
      }
    },
    clickMobileMenuBtn(){
      if(this.mainMenuClass.indexOf("mobile-is-visible")>-1){
        this.mainMenuClass="main-menu";
      } else{
        this.mainMenuClass="main-menu mobile-is-visible";
      }
    }
  }
}
</script>

<style scoped>
.sidebar-menu {
  margin-top: 0px;
  margin-bottom: 0px;
}
.user-info-navbar .user-info-menu>li>a {
    padding: 10px 20px;
}
.sidebar-menu-inner{
  background-color: #2c2e2f;
  height: 100%;
}
@media screen and (min-width: 768px){
  .sidebar-menu.collapsed .sidebar-menu-inner {
    overflow: visible;
    position: fixed;
  }
}
</style>
